import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:top_foundation/component/date_picker/index.dart';
import 'package:top_foundation/utils/theme/theme.dart';

import '../../../../helper/utils/util.dart';
import 'index.dart';
import 'widgets/widgets.dart';

class DatePickerDemoPage extends GetView<DatePickerDemoController> {
  const DatePickerDemoPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    final state = controller.state;
    return ListView(
      padding: EdgeInsets.symmetric(horizontal: 12.r),
      children: [
        TitleContentItemView(
          title: '日历选择 (阶段时间)',
          content: state.calendarText,
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showCalendar(
              isRange: true,
              result: (start, end) {
                var beginTimeStr = DateFormat.format(start!, DateFormatType.ymd,
                    dateSeprator: '-');

                var endTimeStr = DateFormat.format(end!, DateFormatType.ymd,
                    dateSeprator: '-');
                Get.log("$beginTimeStr,$endTimeStr");
                state.calendarText = "$beginTimeStr至$endTimeStr";
                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '日历选择 (时间点)',
          content: state.calendarSingleText,
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showCalendar(
              isRange: false,
              result: (start, end) {
                var beginTimeStr = DateFormat.format(start!, DateFormatType.ymd,
                    dateSeprator: '-');

                state.calendarSingleText = beginTimeStr;
                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '日历选择2 时间段 可手动',
          content: state.date9Str,
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () async {
            final range = await showDateRangePicker(
                context: Get.context!,
                firstDate: DateTime(2020, 1, 1),
                lastDate: DateTime.now());
            if (range == null) {
              state.date9Str = null;
            } else {
              state.date9Str =
                  '${DateFormat.format(range!.start, DateFormatType.ymd)}至${DateFormat.format(range.end, DateFormatType.ymd)}';
            }

            controller.update();
          },
        ),
        TitleContentItemView(
          title: '日历选择2 时间点 可手动',
          content: state.date8 == null
              ? null
              : DateFormat.format(state.date8!, DateFormatType.ymd),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () async {
            final date = await showDatePicker(
                context: Get.context!,
                firstDate: DateTime(2020, 1, 1),
                lastDate: DateTime.now());
            state.date8 = date;
            controller.update();
          },
        ),
        TitleContentItemView(
          title: '时间选择 年月日上下午',
          content: state.date1 == null
              ? null
              : DateFormat.format(state.date1!, DateFormatType.ymdam),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              current: state.date1,
              result: (date, isAm) {
                state.date1 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 半小时',
          content: state.date2 == null
              ? null
              : DateFormat.format(state.date2!, DateFormatType.ymdhm),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.meeting,
              current: state.date2,
              result: (date, isAm) {
                state.date2 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 年月',
          content: state.date3 == null
              ? null
              : DateFormat.format(state.date3!, DateFormatType.ym),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.ym,
              current: state.date3,
              result: (date, isAm) {
                state.date3 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 年月日',
          content: state.date4 == null
              ? null
              : DateFormat.format(state.date4!, DateFormatType.ymd),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.ymd,
              current: state.date4,
              result: (date, isAm) {
                state.date4 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 年月日时分',
          content: state.date5 == null
              ? null
              : DateFormat.format(state.date5!, DateFormatType.ymdhm),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.ymdhm,
              current: state.date5,
              result: (date, isAm) {
                state.date5 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 季度',
          content: state.date6 == null
              ? null
              : DateFormat.format(state.date6!, DateFormatType.quarter),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.quarter,
              current: state.date6,
              result: (date, isAm) {
                state.date6 = date;

                controller.update();
              },
            );
          },
        ),
        TitleContentItemView(
          title: '时间选择 年',
          content: state.date7 == null
              ? null
              : DateFormat.format(state.date7!, DateFormatType.y),
          hasArrow: true,
          border: Border(bottom: ITheme.borderSide),
          onTap: () {
            showDateDayPicker(
              type: DatePickerType.y,
              current: state.date7,
              result: (date, isAm) {
                state.date7 = date;

                controller.update();
              },
            );
          },
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DatePickerDemoController>(
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: const Text("时间选择")),
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}
